<template>
  <view class="custom-nav-bar" :style="navBarStyle">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 导航栏内容 -->
    <view class="nav-content" :style="{ height: navHeight + 'px' }">
      <!-- 左侧区域：返回按钮 + 标题 -->
      <view class="nav-left-area">
        <view class="nav-back-btn" @click="handleBack" v-if="showBack">
          <uni-icons type="left" size="23" :color="backIconColor" />
        </view>
        <text class="nav-title" :style="titleStyle">{{ title }}</text>
      </view>
      
      <!-- 右侧占位 -->
      <view class="nav-right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 定义props
const props = defineProps({
  // 标题文本
  title: {
    type: String,
    default: ''
  },
  // 背景色
  backgroundColor: {
    type: String,
    default: 'transparent'
  },
  // 标题颜色
  titleColor: {
    type: String,
    default: '#333'
  },
  // 是否占用高度
  placeholder: {
    type: Boolean,
    default: true
  },
  // 返回类型：'back'(返回上一级) 或 'redirect'(跳转到指定页面)
  backType: {
    type: String,
    default: 'back'
  },
  // 当backType为'redirect'时，指定跳转的页面路径
  redirectUrl: {
    type: String,
    default: ''
  },
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: true
  },
  // 返回按钮颜色
  backIconColor: {
    type: String,
    default: '#333'
  }
})

// 定义事件
const emit = defineEmits(['back'])

// 系统信息
const statusBarHeight = ref(0)
const navHeight = ref(44) // 导航栏高度

// 获取系统信息
onMounted(() => {
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0
  
  // 不同平台的导航栏高度可能不同
  // #ifdef MP-WEIXIN
  navHeight.value = 44
  // #endif
  
  // #ifdef H5
  navHeight.value = 44
  // #endif
  
  // #ifdef APP-PLUS
  navHeight.value = 44
  // #endif
})

// 计算样式
const navBarStyle = computed(() => {
  return {
    backgroundColor: props.backgroundColor,
    position: props.placeholder ? 'relative' : 'fixed',
    top: props.placeholder ? 'auto' : '0',
    left: props.placeholder ? 'auto' : '0',
    right: props.placeholder ? 'auto' : '0',
    zIndex: props.placeholder ? 'auto' : '999'
  }
})

const titleStyle = computed(() => {
  return {
    color: props.titleColor
  }
})

// 处理返回事件
const handleBack = () => {
  // 触发自定义事件
  emit('back')
  
  if (props.backType === 'redirect' && props.redirectUrl) {
    // 跳转到指定页面
    uni.navigateTo({
      url: props.redirectUrl,
      fail: () => {
        // 如果navigateTo失败，尝试使用reLaunch
        uni.reLaunch({
          url: props.redirectUrl
        })
      }
    })
  } else {
    // 返回上一级
    const pages = getCurrentPages()
    if (pages.length > 1) {
      uni.navigateBack()
    } else {
      // 如果没有上一级页面，跳转到首页
      uni.reLaunch({
        url: '/pages/activity/shared-pile/index'
      })
    }
  }
}
</script>

<style scoped>
.custom-nav-bar {
  width: 100%;
  box-sizing: border-box;
}

.status-bar {
  width: 100%;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding: 0 32rpx; */
  position: relative;


  
}

.nav-left-area {
  display: flex;
  align-items: center;
  flex: 1;
  /* gap: 10rpx; */
}

.nav-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80rpx;
  height: 60rpx;
  /* border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8); */
  /* backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); */
  flex-shrink: 0;
  padding-left: 6rpx;
  /*padding-left:5px;*/
}

.nav-title {
  font-size: 32rpx;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.nav-right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80rpx;
  height: 60rpx;
  flex-shrink: 0;
}

/* 当背景透明时，给返回按钮添加毛玻璃效果 */
.nav-back-btn:active {
  background-color: rgba(255, 255, 255, 0.6);
}
</style>